<template>
  <n-dropdown
    :show="show.name || show.menu"
    :options="options"
    :style="style"
    class="popover-menu"
    size="small"
    :placement="placement"
    @clickoutside="clickOutside"
    :show-arrow="true"
    :theme-overrides="dropdownThemeOverrides"
    @select="select"
  >
    <slot :showName="showName" :showMenu="showMenu" :closeName="closeName"></slot>
  </n-dropdown>
</template>

<script lang="ts" setup>
import { computed, h, ref } from "vue"
import { useThemeStore } from "@/stores/theme"
import { type DropdownOption, type DropdownProps } from "naive-ui"
import VariableName from "@/stores/theme/variable-name"
import { Application } from "@/core/application/application"

const props = defineProps({
  application: {
    type: Object as () => Application,
    required: true
  },
  placement: {
    type: String,
    required: true
  }
})

const options = ref<Array<any>>([])

const show = ref({
  name: false,
  menu: false,
  timestamp: 0
})

const closeName = () => {
  show.value.name = false
}
const closeMenu = () => {
  show.value.menu = false
}

const nameOptions = [
  {
    key: "header",
    type: "render",
    render: () =>
      h(
        "div",
        {
          style: {
            padding: "0.04rem 0.15rem",
            fontSize: "0.14rem"
          }
        },
        props.application?.info.name
      )
  }
]
const showName = () => {
  show.value.name = true
  show.value.menu = false
  options.value = nameOptions
}

const addInDock = {
  key: "add_in_dock",
  label: "驻留在Dock",
  onClick: () => {
    props.application?.addInDock()
  }
}

const removeFromDock = {
  key: "从Dock中移除",
  label: "从Dock中移除",
  onClick: () => props.application?.removeFromDock()
}

const menuOptionOnOpen = [
  {
    type: "divider"
  },
  {
    key: "显示所以窗口",
    label: "显示所有窗口",
    onClick: () => props.application?.show()
  },
  {
    key: "隐藏",
    label: "隐藏",
    onClick: () => props.application?.hide()
  },
  {
    key: "退出",
    label: "退出",
    onClick: () => props.application?.close()
  }
]

const menuOptionOnClose = [
  {
    key: "打开",
    label: "打开",
    onClick: () => props.application?.open()
  }
]

const showMenu = () => {
  if (props.application?.isOpened()) {
    const dockMenu = props.application?.info.dockMenu
    const addOrRemoveDock = props.application?.info.inDock ? removeFromDock : addInDock
    if (dockMenu?.length > 0) {
      options.value = [...dockMenu, { type: "divider" }, addOrRemoveDock, ...menuOptionOnOpen]
    } else {
      options.value = [addOrRemoveDock, ...menuOptionOnOpen]
    }
  } else {
    if (props.application?.info.inDock) {
      options.value = [removeFromDock, ...menuOptionOnClose]
    } else {
      options.value = [addInDock, ...menuOptionOnClose]
    }
  }
  show.value.menu = true
  show.value.name = false
  show.value.timestamp = new Date().getTime()
}

function clickOutside() {
  if (new Date().getTime() - show.value.timestamp > 100) {
    closeName()
    closeMenu()
  }
}

function select(key: string, option: DropdownOption) {
  if ("onClick" in option) {
    ;(option as any).onClick()
  }
  closeMenu()
}

const themeStore = useThemeStore()

const style = ref({
  "--dropdown-background": themeStore.getThemeType(
    "rgba(50, 50, 50, 0.55)",
    "rgba(255, 255, 255, 0.6)"
  ),
  "--dropdown-arrow-background": themeStore.getThemeType(
    "rgba(50, 50, 50, 0.3)",
    "rgba(255, 255, 255, 0.6)"
  )
})

type DropdownThemeOverrides = NonNullable<DropdownProps["themeOverrides"]>

const dropdownThemeOverrides = computed<DropdownThemeOverrides>(() => {
  return {
    optionColorHover: themeStore.getVariable(VariableName.Theme.primaryColor),
    optionTextColorHover: "#fff",
    borderRadius: "7px",
    fontSizeSmall: "13px",
    optionHeightSmall: "25px"
  }
})
</script>

<style lang="scss">
.popover-menu {
  background: var(--dropdown-background);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  border-radius: 5px;
  font-weight: normal;

  .n-dropdown-divider {
    margin: 7px var(--n-option-prefix-width);
  }

  .n-popover-arrow {
    background: var(--dropdown-arrow-background) !important;
  }
}
</style>
